<template>
    <div>
        <div class="panel panel-default panel-search">
            <el-form :inline="true">

                <el-form-item label="周期">
                    <el-input v-model="page.query.param.periodYm" clearable></el-input>

                </el-form-item>

                <el-form-item label="类型">
                    <el-select disabled :clearable="true" v-model="page.query.param.type" style="width:100px">
                        <el-option v-for="item in $dongxwDict.store.PERIOD_TYPES" :key="item[0]" :value="item[0]"
                                   :label="item[1]"></el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="cancel">取消</el-button>

                <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
                <el-button type="primary" plain @click="create">新增</el-button>


            </el-form>
        </div>
        <v-toolbar title="周期 " style="color: rebeccapurple" type="alert">


        </v-toolbar>

        <v-table ref='table' :dblclick='edit' :page='page' :table-minheight='450' @dataloaded='onDataloaded'>
            <el-table-column prop="seq" label="序号" width="50">
                <template slot-scope="scope"><span>{{ scope.$index + 1 }} </span></template>
            </el-table-column>

            <!--<el-table-column prop='periodId' :sortable='true' label='周期标识' width='120'>-->
            <!--<template slot-scope='{row}'><span style='color:black'>-->
            <!--{{row.periodId}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop='type' :sortable='true' label='类型' width='70'>
                <template slot-scope='{row}'>
                    {{ $dongxwDict.getText(row.type, $dongxwDict.store.PERIOD_TYPES) }}
                </template>
            </el-table-column>
            <el-table-column prop='periodYm' :sortable='true' label='周期' width='80'>
                <template slot-scope='{row}'>
                    <!--<span style='color:black'>{{row.periodYm}}</span>-->
                    <el-button type="text" @click="edit(row)" plain> {{ row.periodYm }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop='startDay' label='开始日期--》结束日期' width='188'>
                <template slot-scope='{row}'>
                    <span style='color:black'>
			            {{ $dongxwDict.viewDate(row.startDay) + ' --》 ' + $dongxwDict.viewDate(row.endDay) }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop='workdays' :sortable='true' label='全勤天数' width='100'>
                <template slot-scope='{row}'><span style='color:black'>
			{{ row.workdays }}</span>
                </template>
            </el-table-column>
            <el-table-column prop='active' :sortable='true' label='激活状态' width='100'>
                <template slot-scope='{row}'>
			<span :style='row.active?"color:red":"color:black"'>
				{{ row.active ? '是' : '否' }}
			</span>
                </template>
            </el-table-column>
            <el-table-column prop='updatedBy' :sortable='true' label='最后操作人' width='122'>-->
                <template slot-scope='{row}'><span style='color:black'>
			                {{ row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop='updatedAt' :sortable='true' label='最后操作时间' width='160'>
                <template slot-scope='{row}'><span style='color:black'>
			                {{ row.updatedAt }}</span>
                </template>
            </el-table-column>
            <el-table-column width='80' label='操作'>
                <template slot-scope='scope'>
                    <el-button type='text' title='编辑' @click='edit(scope.row)'>
                        <i class='el-icon-edit'></i>
                    </el-button>
                    <el-button type='text' @click='del(scope.row,scope.$index)' title='删除'>
                        <span style='color: red'> <i class='el-icon-delete red'></i></span>
                    </el-button>
                </template>
            </el-table-column>
        </v-table>
        <v-dialog ref="formDiag" :width="'600px'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer" style="margin-right:40px">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')">保存</el-button>
                <el-button type="default" @click="()=>{$refs.formDiag.hide()}">取消</el-button>
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.el-input {
    width: 160px;
}

.status_green {
    color: red;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>

<script>
//import CustomerSelect from '@/components/widgets/dongxw/CustomerSelect.vue';


import FormPanel from './Form';

export default {
    components: {FormPanel},
    data() {
        return {
            dateRange: [],
            pageNum: 1,
            page: {
                query: {
                    orderBys: 'periodYm|desc',
                    param: {
                        type: 0,
                        isDeleted: false
                    }
                },
                getData: this.$api.attend.attend.PeriodService.query

            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red"
                }
            ]
        };
    },
    computed: {},

    methods: {
        handleCommand(command) {
            this.page.query.orderBys = command
            this.search()
        },
        calCbm(val) {

            return 0;
        },
        onDataloaded(rsp) {

        },
        /*
        导出
         */
        exportRecords() {
            let params = this.getSearchParams();
            this.$api.attend.attend.PeriodService.export(params);
        },
        getSearchParams() {

            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["holiday"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null
                };
            }
            return this.page.query;
        },

        create() {
            this.$refs.formDiag.show();
        },
        edit(row) {
            this.$refs.formDiag.show({periodId: row.periodId});
        },
        toggleStatus(row) {

        },
        del(row) {
            this.$confirm("确定删除此条记录吗?", "提示", {
                type: "warning"
            }).then(() => {
                this.$api.attend.attend.PeriodService.deleteById(row.periodId).then(rsp => {
                    this.search();
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                });
            });
        },
        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            this.search();
        },
        search() {
            this.$refs.table.pageNum = 1;
            this.getSearchParams();
            this.$refs.table.load();
        },
        cancel() {
            this.dateRange = []
            this.page.query.param = {prdFlag: 0}
            this.search()
        }
    },
    created() {
    },
    mounted() {
        this.$on("init", this.init);
    }
};
</script>
